<template>
  <div class="AddOrUpdate_main add_container column_one">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="IOT编码" prop="deviceId">
          <el-input v-model="formData.deviceId" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="IOT名称" prop="hostName">
          <el-input v-model="formData.hostName" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="IOT类型" prop="iotType">
          <el-input v-model="formData.iotType" placeholder="暂无" disabled />
        </el-form-item>
        <el-form-item label="关联设备" prop="deviceName" class="clickChoose">
          <el-input v-model="formData.deviceName" placeholder="请选择" readonly />
          <a class="clickChoose_button" @click.prevent="chooseEquipments">
            <svg-icon icon-class="选择弹框" />
          </a>
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { edit } from '@/api/superManage/iotManage/iotConfiguration'
import chooseEquipment from '@/views/equipmentManage/baseInfo/equipmentInfo/chooseEquiment'
import { addOrUpdate } from '@/api/purchaseManage/materialToCheck'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        deviceId: undefined,
        hostName: undefined,
        iotType: undefined,
        deviceName: undefined,
        companyDeviceId: undefined
      },
      isRepeat: false,
      hasRepeatData: {},
      rules: {
        deviceName: [
          { required: true, message: '关联设备不能为空', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    isRepeat(newValue) {
      if (newValue) {
        const msg = `该设备已被${this.hasRepeatData.hostName}绑定，是否强制绑定新设备，并解除原先绑定设备`
        this.$confirm(msg, '绑定确认', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          cancelButtonClass: 'cancelClass',
          type: 'warning'
        }).then(() => {
          edit({ ...this.formData, repeatStatus: '1' }).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1000
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }).catch(() => {
          this.isRepeat = false
        // this.$layer.close(this.layerid) // 关闭弹框
        })
      }
    }
  },
  created() {
    Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
      this.formData[key] = this.defaultValue[key]
    })
  },
  methods: {
    chooseEquipments() {
      this.$layer.iframe({// 弹框
        content: {
          content: chooseEquipment, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            bookId: this.formData.companyDeviceId ? this.formData.companyDeviceId : ''
          }// props
        },
        area: ['1200px', '600px'],
        title: '选择关联设备', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    showEquipment(data) {
      this.formData.companyDeviceId = data.id
      this.formData.deviceName = data.code + '/' + data.name
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          edit(this.formData).then(res => {
            if (res.data.isRepeat != '0') {
              console.log
              this.isRepeat = true
              this.hasRepeatData = res.data
              return
            }
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
</style>
